<template>
	<div id="app" ref="app">
		<keep-alive>
			<router-view />
		</keep-alive>
		<div v-show="isPcDevice && showVideo" class="video-container">
			<media ref="media" @videoEnded="videoEnded"></media>
		</div>
	</div>
</template>

<script>
import { debounce } from "lodash";
import { addListener, removeListener } from "resize-detector";
import { mapGetters } from "vuex";
import media from '@/views/media';
import { isMobile } from '@/utils';

export default {
	components: {
		media
	},
	data() {
		return {
			showVideo: false,
			videoInterval: null
		};
	},
	computed: {
		...mapGetters(['devicePdMode']),
		isPcDevice() {
			return !isMobile();
		}
	},
	created() {
		this.resize = debounce(this.resize, 200);
		this.resize();
		setTimeout(() => {
			let bodyStyle = document.body.style;
			bodyStyle.visibility = 'visible';
		}, 1);
		sessionStorage.setItem('isPc', JSON.stringify(this.isPcDevice));
		if(this.isPcDevice) {
			this.showVideo = true;
		}
	},
	mounted() {
		addListener(this.$refs.app, this.resize);
	},
	beforeDestroy() {
		removeListener(this.$refs.app, this.resize);
	},
	methods: {
		resize() {
			const width = document.body.clientWidth;
			/**
			 * offsetWidth-对象的可见宽度，包括滚动条等边线，会随窗口的显示大小改变
			 * clientWidth-对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变
			 * innerWidth-窗口中文档显示区域的宽度，不包括边框。该属性可读可写
			 * offsetWidth一般 大于 clientWidth
			 */
			console.log('offsetWidth-', width, document.body.clientWidth, document.body.offsetWidth);
			
			const rem = width / 10; // 将屏幕宽度分成10份， 1份为1rem
			document.documentElement.style.fontSize = width >= 750 ? "12px" : `${rem}px`;
			// document.documentElement.style.fontSize = 28 / 750 * width + 'px';
			this.$store.commit("UPDATE_DEVICEWIDTH", width);
		},
		videoEnded(myPlayer) {
			const info = JSON.parse(sessionStorage.getItem('videoConfigInfo'));
			const interVal = info.find(item => item.configKey == 'business_video_interval_time').configValue;

			console.log('vc-', myPlayer, interVal);
			this.showVideo = false;

			if(this.videoInterval) {
				window.clearInterval(this.videoInterval);
				this.videoInterval = null;
			}

			this.videoInterval = setInterval(() => {
				this.showVideo = true;
				this.$refs.media.initVideo();

				window.clearInterval(this.videoInterval);
				this.videoInterval = null;
			}, interVal * 60 * 1000);
		}
	}
}
</script>

<style lang="scss">
// body {
//   margin: 0;
// }
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   height: 100%;
// }
.video-container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	// background-color: rgba(0, 0, 0, 0.5);
	z-index: 2001;
	transition: all 2s ease;
}
</style>
